<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="navbar-title">摄影师列表</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-bar">
			<text class="iconfont icon-search search-icon"></text>
			<input type="text" class="search-input" placeholder="搜索摄影师" v-model="searchText" @input="onSearch" />
		</view>
		
		<!-- 页面内容 -->
		<view class="page-container">
			<!-- 推荐摄影师标题 -->
			<view class="section-title">
				<text>推荐摄影师</text>
			</view>
			
			<!-- 推荐摄影师列表 -->
			<scroll-view scroll-x class="photographer-scroll">
				<view class="photographer-scroll-inner">
					<view 
						class="photographer-card" 
						v-for="(photographer, index) in featuredPhotographers" 
						:key="'featured-' + index"
						@click="navigateToPhotographer(photographer.id)"
					>
						<image :src="photographer.avatar" mode="aspectFill" class="photographer-avatar"></image>
						<view class="photographer-name">{{photographer.name}}</view>
						<view class="photographer-tag">{{photographer.tag}}</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 摄影师列表标题 -->
			<view class="section-title flex-between">
				<text>全部摄影师</text>
				<text class="text-light" style="font-size: 12px;">共{{photographers.length}}位摄影师</text>
			</view>
			
			<!-- 摄影师列表 -->
			<view class="photographer-list">
				<view 
					class="photographer-item card" 
					v-for="(photographer, index) in photographers" 
					:key="index"
					@click="navigateToPhotographer(photographer.id)"
				>
					<view class="card-content">
						<view class="flex">
							<image :src="photographer.avatar" mode="aspectFill" class="avatar"></image>
							<view class="flex-1 ml-1">
								<view class="flex flex-between items-center">
									<view class="photographer-name">{{photographer.name}}</view>
									<view :class="['badge', photographer.status === '可预约' ? 'badge-success' : photographer.status === '繁忙中' ? 'badge-danger' : 'badge-warning']">
										{{photographer.status}}
									</view>
								</view>
								<view class="flex mt-1 text-light photographer-description">
									<text>{{photographer.description}}</text>
								</view>
								<view class="flex mt-1 items-center">
									<view class="rating">
										<text class="iconfont icon-star" v-for="n in 5" :key="n" :style="{color: n <= photographer.rating ? '#ffc300' : '#eeeeee'}"></text>
									</view>
									<text class="rating-score">{{photographer.rating}}</text>
									<text class="review-count">({{photographer.reviewCount}})</text>
								</view>
							</view>
						</view>
						
						<!-- 作品展示 -->
						<view class="gallery" v-if="photographer.gallery && photographer.gallery.length > 0">
							<image 
								v-for="(image, imgIndex) in photographer.gallery" 
								:key="imgIndex" 
								:src="image" 
								mode="aspectFill" 
								class="gallery-item"
							></image>
						</view>
					</view>
					
					<!-- 价格信息 -->
					<view class="price-footer">
						<view>
							<text class="price">¥{{photographer.price}}</text>
							<text class="price-unit">/次起</text>
						</view>
						<button class="btn btn-primary btn-small" @click.stop="bookPhotographer(photographer.id)">立即预约</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				featuredPhotographers: [
					{
						id: 1,
						name: '王摄影',
						avatar: 'https://img.freepik.com/free-photo/side-view-woman-taking-photos_23-2149915463.jpg',
						tag: '人像专家'
					},
					{
						id: 2,
						name: '林摄影',
						avatar: 'https://img.freepik.com/free-photo/portrait-of-young-photographer_23-2148155579.jpg',
						tag: '婚礼跟拍'
					},
					{
						id: 3,
						name: '张摄影',
						avatar: 'https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg',
						tag: '儿童摄影'
					},
					{
						id: 4,
						name: '李摄影',
						avatar: 'https://img.freepik.com/free-photo/camera-photographic-with-smartphone-notebook_23-2148163126.jpg',
						tag: '产品摄影'
					}
				],
				photographers: [
					{
						id: 1,
						name: '王摄影工作室',
						avatar: 'https://img.freepik.com/free-photo/side-view-woman-taking-photos_23-2149915463.jpg',
						status: '可预约',
						description: '专业人像摄影师，8年经验',
						rating: 4.9,
						reviewCount: 254,
						price: 199,
						gallery: [
							'https://img.freepik.com/free-photo/beautiful-woman-with-natural-make-up_23-2149071216.jpg',
							'https://img.freepik.com/free-photo/woman-with-blonde-hair-looking-camera_23-2147768086.jpg',
							'https://img.freepik.com/free-photo/beautiful-woman-with-curly-brown-hair_23-2148614071.jpg'
						]
					},
					{
						id: 2,
						name: '林婚礼摄影',
						avatar: 'https://img.freepik.com/free-photo/portrait-of-young-photographer_23-2148155579.jpg',
						status: '繁忙中',
						description: '专注婚礼跟拍，用心捕捉每个瞬间',
						rating: 4.8,
						reviewCount: 187,
						price: 299,
						gallery: [
							'https://img.freepik.com/free-photo/groom-putting-ring-bride-s-finger_1157-338.jpg',
							'https://img.freepik.com/free-photo/bride-groom-having-their-wedding-beach_23-2149043964.jpg',
							'https://img.freepik.com/free-photo/groom-bride-elegantly-dressed-with-bouquet-flowers_1328-3356.jpg'
						]
					},
					{
						id: 3,
						name: '张儿童摄影',
						avatar: 'https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg',
						status: '可预约',
						description: '儿童摄影专家，让宝宝自然展现笑容',
						rating: 4.7,
						reviewCount: 156,
						price: 159,
						gallery: [
							'https://img.freepik.com/free-photo/little-girl-red-dress-straw-hat-sitting-suitcase_1304-3750.jpg',
							'https://img.freepik.com/free-photo/little-girl-yellow-dress-playing-with-teddy-bear_1304-4843.jpg',
							'https://img.freepik.com/free-photo/little-girl-blue-dress-running-meadow_1304-5130.jpg'
						]
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			onSearch() {
				// 实现搜索功能
				console.log('搜索:', this.searchText);
			},
			navigateToPhotographer(id) {
				uni.navigateTo({
					url: '/pages/photographer_detail/photographer_detail?id=' + id
				});
			},
			bookPhotographer(id) {
				uni.navigateTo({
					url: '/pages/booking/booking?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-width: 100%;
		padding: 0;
	}
	
	/* 导航栏 */
	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 44px;
		background-color: #fff;
		border-bottom: 1px solid $border-color;
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 0 15px;
		/* #ifdef MP-WEIXIN */
		padding-top: var(--status-bar-height);
		height: calc(44px + var(--status-bar-height));
		/* #endif */
	}
	
	.navbar-title {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
	}
	
	/* 搜索框 */
	.search-bar {
		padding: 8px 15px;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-bottom: 1px solid $border-color;
		position: relative;
	}
	
	.search-input {
		background-color: $secondary-color;
		border-radius: 16px;
		padding: 6px 10px 6px 30px;
		border: none;
		width: 100%;
		height: 32px;
		font-size: 14px;
	}
	
	.search-icon {
		position: absolute;
		left: 25px;
		color: $light-text;
	}
	
	.icon-search:before {
		content: "\e600";
	}
	
	/* 页面容器 */
	.page-container {
		padding: 15px;
		padding-bottom: 50px;
	}
	
	/* 区块标题 */
	.section-title {
		display: flex;
		margin-bottom: 15px;
		font-size: 16px;
		font-weight: 500;
	}
	
	/* 推荐摄影师滚动 */
	.photographer-scroll {
		white-space: nowrap;
		margin: 0 -15px;
		padding: 0 15px;
		margin-bottom: 20px;
	}
	
	.photographer-scroll-inner {
		display: flex;
	}
	
	.photographer-card {
		display: inline-block;
		width: 80px;
		margin-right: 15px;
		text-align: center;
	}
	
	.photographer-avatar {
		width: 80px;
		height: 80px;
		border-radius: 40px;
		margin-bottom: 8px;
	}
	
	.photographer-name {
		font-weight: 500;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.photographer-tag {
		font-size: 12px;
		color: $light-text;
	}
	
	/* 摄影师列表 */
	.photographer-list {
		margin-bottom: 20px;
	}
	
	.photographer-item {
		margin-bottom: 15px;
	}
	
	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 4px;
	}
	
	.photographer-description {
		font-size: 12px;
		line-height: 1.3;
	}
	
	/* 评分 */
	.rating {
		font-size: 13px;
		margin-right: 5px;
	}
	
	.icon-star:before {
		content: "\e62d";
	}
	
	.rating-score {
		font-size: 12px;
		margin-right: 3px;
	}
	
	.review-count {
		font-size: 12px;
		color: $light-text;
	}
	
	/* 相册 */
	.gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
		margin-top: 10px;
	}
	
	.gallery-item {
		aspect-ratio: 1;
		border-radius: 4px;
	}
	
	/* 价格 */
	.price-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		border-top: 1px solid $border-color;
		background-color: #fafafa;
	}
	
	.price {
		font-weight: 500;
		color: $primary-color;
		font-size: 16px;
	}
	
	.price-unit {
		font-size: 12px;
		color: $light-text;
	}
	
	.btn-small {
		padding: 6px 12px;
		font-size: 12px;
	}
</style>
